<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
	td{
		padding-bottom: 7px;
		padding-left: 10px;
	}
	a:link {
		font-size: 18px;
		color: gray;
		text-decoration: none;
	}
	a:visited{
		color:gray;
		text-decoration: none;
		
	}
	a:hover {
		color: #000000;
		text-decoration: underline;
	}  
	span{
		margin-top: 15px;
	}
</style>
</head>
<body>
<div  align="center">
		<!-- <form name="f"  action="">
		<table>
			<tr>
				<td align="right">请输入用户姓名的关键字：</td>
				<td><input type="text" name="userName"></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="button" onclick="query()" value="查询"></td>
			</tr>
		</table>
	</form> -->
	<hr/>
	<div id="table" align="left" style="text-align: left;"></div><!-- 用来显示查询的结果 -->
	<!-- <div id ="ins" align="center" style="text-align: center;margin-left: 350px">
		<hr/>
		<form name = "in">
			<table>
				<tr>
					<td align="right" >选择需要增加的角色：</td>
					<td><select name="role" id="showRole"></select></td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="button" value="增加" onclick="doIns()"></td>
				</tr>
			</table>
		</form>
	</div> -->
</div>
</body>
<script type="text/javascript">
	query();
	function query(){
		$.ajax({// 进行提交
			type : "post",// 提交方式
			url : "${pageContext.request.contextPath}/FindAllUserServlet",// 提交路径
			async : true,// 是否异步
			dataType : 'json',// 数据格式（不进行跨越json，进行跨越jsonp）
			data : {// 参数
			},
			success : function(data){// 执行成功后调动的方法
				var content = ""
				for(var i = 0;i < data.length;i++){
					var item = data[i];
					var userName = item.userAccount;
					content += "<span><a href='#' onclick='findRole("+item.userId+")'>"+item.userAccount+"</a></span><br/>";
				} 
				content += "<div id='showRole' style='text-align: left;margin-left: 200px;margin-top: -120px;'></div>";
				$("#table").html(content);		
			},
			error : function(err){// 执行失败后的失败信息的显示
				console.log(err);
			}
		});
	}
	function findRole(userId){
		$.ajax({// 进行提交
			type : "post",// 提交方式
			url : "${pageContext.request.contextPath}/FindAllRoleServlet",// 提交路径
			async : true,// 是否异步
			dataType : 'json',// 数据格式（不进行跨越json，进行跨越jsonp）
			data : {// 参数
			},
			success : function(data){// 执行成功后调动的方法
				var content = "<form name='rr'  action=''><table><tr>"
				for(var i = 0;i < data.length;i++){
					var item = data[i];
					content += "<td style='width: 120px'> <input id='"+item.roleId+"' type='checkbox' name='checkbox' value='"+item.roleName+"'>"+item.roleName+"</td>";
					if( (i+1)%5 == 0){
						content += "</tr><tr>"
					}
					if(i == data[0].count){
						contrnt += "</tr>";
					}
				} 
				content += "</table><div id='aa'></div>"
				$("#showRole").html(content);	
				role(userId);
			},
			error : function(err){// 执行失败后的失败信息的显示
				console.log(err);
			}
		});
	}
	function role(userId){
		var userId = userId;
		$.ajax({// 进行提交
			type : "post",// 提交方式
			url : "${pageContext.request.contextPath}/FindUserRoleServlet",// 提交路径
			async : true,// 是否异步
			dataType : 'json',// 数据格式（不进行跨越json，进行跨越jsonp）
			data : {// 参数
				userId : userId,
			},
			success : function(data){// 执行成功后调动的方法
				for(var i = 0;i < data.length;i++){
					var item = data[i];
					$("input:checkbox[value='"+item.roleName+"']").attr('checked','true');
				} 
				var content = "<div style='margin-left: 290px;margin-top: -100px;'>"+data[0].userAccount+"</div>";
				$("#aa").html(content);
			},
			error : function(err){// 执行失败后的失败信息的显示
				console.log(err);
			}
		});
	} 
</script>
</html>